.virtual-code-viewer-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #f8f9fa;

  // === 头部信息栏 ===
  .header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

    .file-info {
      display: flex;
      align-items: center;
      gap: 1rem;
      flex-wrap: wrap;

      .file-title {
        margin: 0;
        font-size: 1.25rem;
        font-weight: 600;
      }

      .file-details {
        padding: 0.25rem 0.75rem;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 20px;
        font-size: 0.875rem;
        backdrop-filter: blur(10px);
      }

      .feature-badge {
        padding: 0.25rem 0.75rem;
        border-radius: 20px;
        font-size: 0.875rem;
        font-weight: 500;
        backdrop-filter: blur(10px);

        &.virtual-scroll {
          &.enabled {
            background: rgba(40, 167, 69, 0.3);
            color: #fff;
          }
          &:not(.enabled) {
            background: rgba(255, 193, 7, 0.3);
            color: #fff;
          }
        }
      }

      .syntax-support {
        padding: 0.25rem 0.75rem;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 20px;
        font-size: 0.875rem;
        backdrop-filter: blur(10px);
      }
    }

    .actions {
      display: flex;
      gap: 0.5rem;

      .btn {
        padding: 0.5rem 1rem;
        border: none;
        border-radius: 6px;
        font-size: 0.875rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease;
        backdrop-filter: blur(10px);

        &.btn-toggle {
          background: rgba(255, 255, 255, 0.2);
          color: white;

          &.active {
            background: rgba(40, 167, 69, 0.8);
          }

          &:hover {
            background: rgba(255, 255, 255, 0.3);
          }
        }

        &.btn-secondary {
          background: rgba(255, 255, 255, 0.2);
          color: white;

          &:hover {
            background: rgba(255, 255, 255, 0.3);
          }
        }

        &:disabled {
          opacity: 0.6;
          cursor: not-allowed;
        }
      }
    }
  }

  // === 性能信息栏 ===
  .performance-bar {
    padding: 0.75rem 1rem;
    background: linear-gradient(90deg, #f8f9fa 0%, #e9ecef 100%);
    border-bottom: 1px solid #dee2e6;

    .performance-info {
      display: flex;
      align-items: center;
      gap: 1rem;
      flex-wrap: wrap;

      .performance-text {
        font-weight: 600;
        color: #495057;
      }

      .threshold-info {
        font-size: 0.875rem;
        color: #6c757d;
        font-style: italic;
      }
    }
  }

  // === 加载和错误状态 ===
  .loading-container, .error-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    color: #6c757d;

    .loading-spinner {
      width: 40px;
      height: 40px;
      border: 4px solid #f3f3f3;
      border-top: 4px solid #007bff;
      border-radius: 50%;
      animation: spin 1s linear infinite;
      margin-bottom: 1rem;
    }

    .error-icon {
      font-size: 3rem;
      margin-bottom: 1rem;
    }

    .error-message {
      margin: 0 0 1rem 0;
      text-align: center;
    }
  }

  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  // === 主内容区域 ===
  .main-content {
    display: flex;
    flex: 1;
    overflow: hidden;

    // === 侧边栏面板 ===
    .side-panel {
      width: 300px;
      background: white;
      border-right: 1px solid #dee2e6;
      overflow-y: auto;
      padding: 1rem;

      .regions-panel {
        h3, h4 {
          margin: 0 0 0.75rem 0;
          color: #495057;
          font-size: 1rem;
          font-weight: 600;
        }

        .regions-list {
          margin-bottom: 1.5rem;

          .region-item {
            padding: 0.75rem;
            border: 1px solid #dee2e6;
            border-radius: 8px;
            margin-bottom: 0.5rem;
            cursor: pointer;
            transition: all 0.2s ease;

            &:hover {
              background: #f8f9fa;
              border-color: #007bff;
            }

            .region-info {
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-bottom: 0.5rem;

              .region-name {
                font-weight: 600;
                color: #495057;
              }

              .region-lines {
                font-size: 0.875rem;
                color: #6c757d;
              }
            }

            .region-status {
              display: flex;
              align-items: center;
              gap: 0.5rem;

              .status-badge {
                padding: 0.125rem 0.5rem;
                border-radius: 12px;
                font-size: 0.75rem;
                font-weight: 500;
                background: #d4edda;
                color: #155724;
              }
            }

            .region-actions {
              margin-top: 0.5rem;

              .btn-small {
                padding: 0.25rem 0.5rem;
                border: none;
                background: #007bff;
                color: white;
                border-radius: 4px;
                cursor: pointer;
                font-size: 0.75rem;

                &:hover {
                  background: #0056b3;
                }
              }
            }
          }
        }

        .quick-actions {
          margin-bottom: 1.5rem;

          .btn-action {
            display: block;
            width: 100%;
            padding: 0.5rem;
            margin-bottom: 0.5rem;
            border: 1px solid #007bff;
            background: white;
            color: #007bff;
            border-radius: 6px;
            cursor: pointer;
            font-size: 0.875rem;
            transition: all 0.2s ease;

            &:hover {
              background: #007bff;
              color: white;
            }
          }
        }

        // === 虚拟滚动控制面板 ===
        .virtual-scroll-controls {
          margin-bottom: 1.5rem;
          padding: 1rem;
          background: #f8f9fa;
          border-radius: 8px;
          border: 1px solid #dee2e6;

          .control-item {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin-bottom: 0.75rem;

            .switch {
              position: relative;
              display: inline-block;
              width: 50px;
              height: 24px;

              input {
                opacity: 0;
                width: 0;
                height: 0;

                &:checked + .slider {
                  background-color: #007bff;

                  &:before {
                    transform: translateX(26px);
                  }
                }
              }

              .slider {
                position: absolute;
                cursor: pointer;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background-color: #ccc;
                transition: 0.3s;
                border-radius: 24px;

                &:before {
                  position: absolute;
                  content: "";
                  height: 18px;
                  width: 18px;
                  left: 3px;
                  bottom: 3px;
                  background-color: white;
                  transition: 0.3s;
                  border-radius: 50%;
                }
              }
            }

            .control-label {
              font-weight: 500;
              color: #495057;
            }
          }

          .control-info {
            padding: 0.5rem;
            background: white;
            border-radius: 4px;
            border: 1px solid #dee2e6;
            font-family: 'Courier New', monospace;
            color: #6c757d;
            line-height: 1.4;
          }
        }

        .syntax-info {
          .syntax-status {
            display: flex;
            align-items: center;
            gap: 0.5rem;

            .language-tag {
              padding: 0.25rem 0.5rem;
              background: #e9ecef;
              border-radius: 4px;
              font-size: 0.75rem;
              font-weight: 600;
              color: #495057;
            }

            .support-status {
              font-size: 0.875rem;
              font-weight: 500;

              &.supported {
                color: #28a745;
              }

              &.not-supported {
                color: #dc3545;
              }
            }
          }
        }
      }
    }

    // === 代码显示容器 ===
    .code-container {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;

      .code-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.75rem 1rem;
        background: white;
        border-bottom: 1px solid #dee2e6;

        .code-title {
          font-weight: 600;
          color: #495057;
        }

        .code-language {
          padding: 0.25rem 0.5rem;
          background: #e9ecef;
          border-radius: 4px;
          font-size: 0.75rem;
          font-weight: 600;
          color: #495057;
        }

        .render-mode-indicator {
          display: flex;
          align-items: center;
          gap: 0.5rem;

          .mode-label {
            font-size: 0.875rem;
            color: #6c757d;
          }

          .mode-name {
            padding: 0.25rem 0.75rem;
            border-radius: 20px;
            font-size: 0.875rem;
            font-weight: 500;

            &.virtual {
              background: #d4edda;
              color: #155724;
            }

            &.traditional {
              background: #fff3cd;
              color: #856404;
            }
          }
        }
      }

      // === 虚拟滚动容器 ===
      .scroll-container {
        flex: 1;
        overflow: auto;
        background: white;
        position: relative;

        &.virtual-mode {
          // 虚拟滚动模式特殊样式
          .content-container {
            position: relative;
          }

          .rendered-content {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
          }
        }

        .content-container {
          min-height: 100%;
        }

        .rendered-content {
          .line-container {
            &[data-virtual-index] {
              // 虚拟滚动行标识
            }

            .code-line {
              display: flex;
              align-items: flex-start;
              min-height: 24px;
              line-height: 1.5;
              font-family: 'Courier New', monospace;
              font-size: 14px;
              padding: 0.125rem 0;
              transition: background-color 0.2s ease;

              &.virtual-visible {
                // 虚拟滚动中可见的行
                opacity: 1;
              }

              &.original-visible {
                // 原始可见区域的特殊标识
                border-left: 3px solid transparent;
              }

              &.manually-expanded {
                // 手动展开行的样式
                background: rgba(255, 248, 220, 0.5);
                border-left: 3px solid #ffc107;
              }

              &:hover {
                background: rgba(0, 123, 255, 0.05);
              }

              .line-number {
                min-width: 60px;
                padding: 0 0.75rem;
                text-align: right;
                color: #6c757d;
                user-select: none;
                background: #f8f9fa;
                border-right: 1px solid #dee2e6;
                font-weight: 500;
              }

              .line-content {
                flex: 1;
                padding: 0 1rem;
                white-space: pre;
                overflow-x: auto;
                background: transparent;
                border: none;
                font-family: inherit;
                font-size: inherit;
                line-height: inherit;
              }
            }

            .collapsed-line {
              display: flex;
              align-items: center;
              background: #f8f9fa;
              border: 1px dashed #dee2e6;
              margin: 0.25rem 0;
              border-radius: 4px;
              min-height: 32px;

              .line-number-expand-area {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                min-width: 60px;
                padding: 0.5rem 0.25rem;
                border-right: 1px solid #dee2e6;
                background: #e9ecef;

                .line-number-item {
                  font-size: 0.75rem;
                  font-weight: 500;
                  color: #6c757d;
                  margin: 0.125rem 0;

                  &.expand-icon {
                    cursor: pointer;
                    color: #007bff;
                    font-size: 0.875rem;
                    transition: all 0.2s ease;

                    &:hover {
                      color: #0056b3;
                      transform: scale(1.2);
                    }
                  }

                  &.start-line, &.end-line {
                    font-family: 'Courier New', monospace;
                  }
                }
              }

              .collapsed-content {
                flex: 1;
                padding: 0.5rem 1rem;
                text-align: center;

                .collapsed-text {
                  color: #6c757d;
                  font-style: italic;
                  font-size: 0.875rem;
                }
              }
            }
          }
        }
      }
    }
  }

  // === 帮助面板 ===
  .help-panel {
    background: white;
    border-top: 1px solid #dee2e6;
    padding: 1rem;

    details {
      summary {
        cursor: pointer;
        font-weight: 600;
        color: #495057;
        padding: 0.5rem;
        border-radius: 4px;
        transition: background-color 0.2s ease;

        &:hover {
          background: #f8f9fa;
        }
      }

      .help-content {
        padding: 1rem;
        margin-top: 0.5rem;
        background: #f8f9fa;
        border-radius: 8px;

        .feature-comparison {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 2rem;
          margin-bottom: 1.5rem;

          .feature-col {
            h5 {
              margin: 0 0 0.75rem 0;
              color: #495057;
              font-size: 1rem;
            }

            ul {
              margin: 0;
              padding-left: 1.25rem;

              li {
                margin-bottom: 0.5rem;
                line-height: 1.4;

                strong {
                  color: #495057;
                }
              }
            }
          }
        }

        .usage-tips {
          h5 {
            margin: 0 0 0.75rem 0;
            color: #495057;
            font-size: 1rem;
          }

          ul {
            margin: 0;
            padding-left: 1.25rem;

            li {
              margin-bottom: 0.5rem;
              line-height: 1.4;
            }
          }
        }
      }
    }
  }

  // === 响应式设计 ===
  @media (max-width: 768px) {
    .main-content {
      flex-direction: column;

      .side-panel {
        width: 100%;
        max-height: 200px;
      }
    }

    .header-bar {
      .file-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
      }
    }

    .help-content .feature-comparison {
      grid-template-columns: 1fr;
      gap: 1rem;
    }
  }

  // === 高对比度模式支持 ===
  @media (prefers-contrast: high) {
    .code-line {
      border-bottom: 1px solid #000;
    }

    .collapsed-line {
      border: 2px solid #000;
    }
  }

  // === 减少动画模式支持 ===
  @media (prefers-reduced-motion: reduce) {
    * {
      transition: none !important;
      animation: none !important;
    }
  }
} 